<template>
    <MiDialog>
        <template v-slot:header>
            <p>{{ props.title }}</p>
        </template>
        <template #content>
            <div>
                <div v-if="props.isDefault">
                    <p>{{ props.text }}</p>
                </div>
                <div v-else>
                    <p>{{ props.textTitle }}</p>
                    <p>
                        {{ props.text }}
                        <span class="default-text">《小米有品用户协议》</span>、
                        <span class="default-text">《隐私政策》</span>、
                        <span class="default-text">《小米账号使用协议》</span>和
                        <span class="default-text">《小米账号隐私政策》</span>
                    </p>
                </div>
            </div>
        </template>
        <template #footer>
            <div class="btn-box">
                <button text @click="props.reject()">不同意</button>
                <button text style="color:rgb(159, 128, 82)" @click="props.resolve()">同意</button>
            </div>
        </template>
    </MiDialog>

</template>

<script lang="ts" setup>

import MiDialog from '../MiDialog/MiDialog.vue';
const props = withDefaults(defineProps<{
    title?: string;
    resolve: Function;
    reject: Function;
    text?: string;
    textTitle?: string;
    isDefault?: boolean
}>(), {
    title: "声明与政策",
    text: "您可在有品进行商品浏览、支付购买、售后服务等功能。我们将严格遵守相关法律法规和隐私政策以保护您的个人信息。请您阅读并同意",
    textTitle: "欢迎您来到小米有品！",
    isDefault: false
})


</script>
<style scoped lang="stylus">
.btn-box
    display flex
    justify-content center
    height 50px
    border-radius: 8px;
    
.btn-box button
    border 0
    background-color #fff
    height 100%
    flex-grow 1
    border-radius: 8px;

.default-text
    color:rgb(159, 128, 82);
</style>